<template>
  <zc-card>
    <avue-crud
      ref="crud"
      :option="option"
      :page.sync="page"
      :table-loading="loading"
      :upload-after="uploadAfter"
      :upload-before="uploadBefore"
      v-model="form"
      :upload-error="uploadError"
      @on-load="getList"
      :data="data"
      @row-update="rowUpdate"
      :permission="permission"
      @row-save="rowSave"
      @row-del="rowDel"
      @refresh-change="refreshChange"
      @search-reset="searchChange2"
      @search-change="searchChange"
    >
      <template slot="state" slot-scope="scope">
        <el-switch
          v-model="scope.row.state"
          :disabled="!permission.editBtn"
          :active-value="1"
          :inactive-value="2"
          :active-color="defaultTheme()"
          @change="
            (e) => {
              switchChange(e, scope.row.id);
            }
          "
          inactive-color="#DCDFE6"
        />
      </template>

      <!-- <template slot-scope="scope" slot="menu">
        <el-button
          v-if="permission.editBtn"
          icon="el-icon-edit"
          :type="scope.type"
          :size="scope.size"
          @click.stop="handleEdit(scope.row, scope.index)"
          >编辑</el-button
        >
        <el-button
          v-if="permission.delBtn"
          icon="el-icon-delete"
          :type="scope.type"
          :size="scope.size"
          @click.stop="handleDel(scope.row, scope.index)"
          >删除</el-button
        >
      </template> -->
    </avue-crud>
  </zc-card>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  getList,
  update,
  add,
  del,
  updateStatus
} from './admission-record.js'
import option from './admission-record-options.js'
import { defaultTheme } from '@/settings'

export default {
  name: 'AdmissionRecord',
  data() {
    return {
      permission: {
        addBtn: false,
        editBtn: false,
        delBtn: false,
        excelBtn: false
      }, // 权限
      page: {
        currentPage: 1,
        pageSize: 10
      },
      form: {},
      params: {},
      loading: false,
      data: [],
      option: {}
    }
  },
  created() {
    const role = this.$defaultRoleStatus
    this.permission.addBtn = this.zcbtn[this.$options.name + '_add'] || role
    this.permission.editBtn = this.zcbtn[this.$options.name + '_edit'] || role
    this.permission.delBtn = this.zcbtn[this.$options.name + '_del'] || role
    this.permission.excelBtn =
        this.zcbtn[this.$options.name + '_excel'] || role
    this.option = option(this)
  },
  mounted() {

  },
  computed: {
    ...mapGetters(['zcbtn'])
  },
  methods: {
    defaultTheme() {
      return defaultTheme
    },
    // switch切换 启动禁用
    switchChange(e, id) {
      if (e == 1) {
        updateStatus({ field: 'state', value: 1, id }).then((res) => {
          this.$notify({
            title: '成功',
            message: '修改状态成功',
            type: 'success'
          })
        })
      }
      if (e == 2) {
        updateStatus({ field: 'state', value: 2, id }).then((res) => {
          this.$notify({
            title: '成功',
            message: '修改状态成功',
            type: 'success'
          })
        })
      }
    },
    // 上传前
    uploadError(error, column) {
      console.error(error)
      console.error(column)
    },
    uploadBefore(file, done, loading) {
      done()
      // 文件处理

      // if (
      //   suffix == "pdf" ||
      //   suffix == "doc" ||
      //   suffix == "docx" ||
      //   suffix == "xlsx"
      // ) {
      //   this.form.info_files_name.push(fileName);
      //   this.form.info_files_suffix.push(suffix);
      //   done();
      //   return;
      // }

      // 什么都不是

      // if (suffix) {
      //   loading();
      //   this.$message.error("请上传正确的格式");
      // }
    },
    // 自定义删除
    handleDel(row, index) {
      this.$refs.crud.rowDel(row, index)
    },
    // 自定义编辑
    handleEdit(row, index) {
      this.$refs.crud.rowEdit(row, index)
    },
    uploadAfter(res, done) {
      done()
    },
    // 获取列表
    async getList() {
      this.loading = true
      const data = Object.assign(
        {
          current: this.page.currentPage,
          size: this.page.pageSize
        },
        this.params
      )
      this.data = []
      return getList(data).then((res) => {
        this.loading = false
        this.page.total = res.totalRow
        this.data = res.list
        return Promise.resolve(true)
      })
    },
    // 新增
    rowSave(row, done, loading) {
      add(row)
        .then(() => {
          this.$message.success('新增成功')
          done()
          this.getList()
        })
        .catch(() => {
          loading()
        })
    },
    // 修改数据
    rowUpdate(row, index, done, loading) {
      update(row)
        .then(() => {
          this.$message.success('修改成功')
          done()
          this.getList()
        })
        .catch(() => {
          loading()
        })
    },
    // 删除
    rowDel(row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          return del(row.id)
        })
        .then(() => {
          this.$message.success('删除成功')
          this.getList()
        })
    },
    async searchChange(params, done) {
      // console.log(params);
      if (params.add_time && params.add_time.length > 0) {
        params.start_time = params.add_time[0].getTime() / 1000
        params.end_time = params.add_time[1].getTime() / 1000
      }
      if (done) done()
      this.params = params
      this.page.currentPage = 1
      await this.getList()
      this.$message.success('搜索成功')
    },
    async searchChange2(params, done) {
      console.log(params)
      if (done) done()
      this.params = {}
      this.page.currentPage = 1
      await this.getList()
      this.$message.success('搜索成功')
    },
    async refreshChange() {
      await this.getList()
      this.$message.success('刷新成功')
    }
  }
}
</script>

<style lang="scss" scoped>
  .column-img-avatar {
    height: 40px;
    width: 40px;
    border-radius: 50%;
  }

  .user {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .user-msg {
    margin-left: 4px;
    text-align: left;
  }

  .namex {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 110px;
    text-align: left;
  }
</style>
